<template>
	
	<view class="container">
		<navBack></navBack>
		<!-- 头部区域 -->
		<view class="header">
		    <image class="background" v-if="SongSheetList.coverImgUrl" :src="SongSheetList.coverImgUrl"></image>
		    <image class="cover" v-if="SongSheetList.coverImgUrl" :src="SongSheetList.coverImgUrl"></image>
		    <view class="listInfo">
		        <text class="title">{{SongSheetList.name}}</text>
		        <view class="creator">
		            <image class="creatorAvatar" v-if="SongSheetList.creator" :src="SongSheetList.creator.avatarUrl"></image>
		            <text class="creatorName" v-if="SongSheetList.creator">{{SongSheetList.creator.nickname}}</text>
		        </view>
		        <text class="desc">{{SongSheetList.description==null?'':SongSheetList.description}}</text>
		    </view>
		</view>   
		<!-- 列表区域 -->
		<scroll-view scroll-y class="songScroll" v-if="SongSheetList.tracks" >
		    <view class="songScrollItem" v-for="(item,index) in SongSheetList.tracks" @tap="toSongDetail(item.id,index)" :data-song="item.id" :key="item.id">
		        <view class="index">{{index+1}}</view>
		        <view class="musicInfo">
		            <text class="musicName">{{item.name}}</text>
		            <text class="author">{{item.ar[0].name}} - {{item.al.name}}</text>
		        </view>
		    </view>
		    <view class="loadingContainer">
		        <view class="isMore" @tap="loadMore" v-if="SongSheetList.tracks.length==20">
		            点击加载全部数据
		        </view>
		    </view>
		</scroll-view>
		<view class="tip" v-else>歌单数据加载中...</view>    
	</view>
</template>

<script>
	export default {
		data() {
			return {
				SongSheetList:[],// 对应歌单id的歌单数据
				songSheetId:'',// 歌单id
				index:0, // 切换歌曲的下标
			}
		},
		onLoad(options) {
			this.songSheetId = options.songSheetId // 把传过来的歌单ID存起来
			this.getSongSheetDetailList(this.songSheetId)
			console.log(this.songSheetId);
			
			uni.$on('switchType',(type) => {
				console.log(type,'我要切歌了');
				if(type === 'pre'){ // 切换上一首
					(this.index === 0) && (this.index = this.SongSheetList.tracks.length)
					this.index -= 1
				}else {// 切换下一首
					if(this.index === this.SongSheetList.tracks.length - 1) {this.index = -1}
					this.index += 1
				}
				let musicId = this.SongSheetList.tracks[this.index].id
				// 将musicId 回传给songDetail页面
				uni.$emit('musicId',musicId)
				console.log(musicId,'recommendSong');
			})
		},
		methods: {
			// 获取对应歌单id的歌单详情列表
			async getSongSheetDetailList(songSheetId) {
				const res = await this.$myRequest('/playlist/detail',{id:songSheetId})
				this.SongSheetList = res.playlist
				console.log(res);
			},
			// 加载全部歌曲
			async loadMore(){
				console.log(this.SongSheetList.trackIds.length);
				let SongSheetListindex = this.SongSheetList.trackIds.length // 当前歌单的数组长度
				let index = 20
				while(index < SongSheetListindex){
					// 获取歌曲详情
					let res = await this.$myRequest('/song/detail?',{
						ids:this.SongSheetList.trackIds[index].id,
						})
					index++
					this.SongSheetList.tracks.push(...res.songs)
					// console.log(index);
				}
			},
			// 点击播放音乐
			toSongDetail(songId,index){
				this.index = index // 存储到全局
				uni.navigateTo({
					url:'/pages/songDetail/songDetail?songId=' + songId
				})
			}
		}
	}
</script>

<style lang="scss">
	text {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space:nowrap;
	}
	
	.container {
		.header {
		    box-sizing: border-box;
		    height: 30vh;
		    width: 100%;
		    display: flex;
		    background-color: rgba(0, 0, 0, 0.1);
		    padding: 150rpx 20rpx 20rpx;
		    position: relative;
			
		    overflow: hidden;
			.background {
			    position: absolute;
			    top: 0;
			    left: 0;
			    z-index: -100;
			    width: 100%;
			    height: 550rpx;
			    filter: blur(50px);
			}
			.cover {
			    width: 200rpx;
			    height: 200rpx;
			    border-radius: 20rpx;
			}
			.listInfo {
			    width: 50vw;
			    display: flex;
			    height: 15vh;
			    flex-direction: column;
			    margin-left: 40rpx;
			    justify-content: space-between;
			    position: relative;
				.title{
				    font-size: 30rpx;
				    color: white;
				    opacity: 0.8;
				}
				.creator {
				    display: flex;
				    align-items: center;
				    position: absolute;
				    top: 30%;
					.creatorAvatar {
					    width: 50rpx;
					    height: 50rpx;
					    border-radius: 50%;
					}
					.creatorName {
					    margin-left: 20rpx;
					    color:white;
					    opacity: 0.5;
					    font-size: 24rpx;
					}
				}
				// 头部描述
				.desc {
				    color:white;
				    opacity: 0.5;
				    font-size: 24rpx;
				    height: 35rpx;
				    overflow: hidden;
				}
			}
		}
		.songScroll {
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 410rpx); //140rpx 头部和导航的高度总和
			/* #endif */
			/* #ifdef H5 */
			height: calc(100vh - 410rpx);
			/* #endif */
			.songScrollItem {
			    display: flex;
			    align-items: center;
			    height: 100rpx;
			    margin: 25rpx 20rpx;
				.index {
				    margin: 0 30rpx 0 10rpx;
				    width: 50rpx;
				    text-align: center;
				    color: rgb(150, 150, 150);
				}
				.musicInfo {
				    flex: 1;
				    display: flex;
				    flex-direction: column;
					text {
					    width: 70vw;
					} 
					.author {
					    color:rgb(150, 150, 150);
					    font-size:24rpx;
					}
				}
			}
			 
			.loadingContainer {
			    width: 100%;
			    text-align: center;
				.isMore {
				    color: #aaa;
				    font-size: 28rpx;
				    width: 100%;
				    text-align: center;
				}
			}
		}
		.tip {
		    font-size: 28rpx;
		    color: #aaa;
		    width: 100%;
		    margin-top: 50rpx;
		    text-align: center;
		  }
	}
</style>
